<template>
  <div class="home">
     <header>购物起清单</header>
     <ul>
       <li v-for="(item,index) in cartList" :key="index">
         <input type="checkbox" v-model="item.ischeck">
         <img :src="item.s_pic" alt="">
         <section>
           <b>{{item.title}}</b>
           <p style="color:red">￥{{item.price}}</p>
         </section>
         <div class="right">
           <p @click="item.num++">+</p>
           <p>{{item.num}}</p>
           <p @click="item.num<=0?1:item.num--">-</p>
         </div>
       </li>
     </ul>
     <div class="foot">
       <span @click="del">删除选中</span>
       <span>合计：￥{{allPrice}}</span>
       <span class="foot_right">去结算（{{allNum}}）</span>
     </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions,mapState,mapMutations } from 'vuex';
export default {
  name: 'Home',
  components: {
  },
  computed:{
    ...mapState(['cartList']),
    allNum(){
      let num = 0;
      this.cartList.forEach(item => {
        if(item.ischeck){
          num+=item.num
        }
      });
      return num
    },
    allPrice(){
      let price = 0;
      this.cartList.forEach(item => {
        if(item.ischeck){
          price+=item.num*item.price
        }
      });
       return price
    }
  },
  created() {
    this.getList() // 请求数据
  },
  methods: {
    ...mapActions(['getList']),
    ...mapMutations(['del'])
  },
}
</script>
<style lang="scss">
   .home{
     background: #e9e9e9;
     height: 100%;
     overflow: hidden;
   }
   header{
    line-height: 50px;
    text-align: center;
    background: #fff;
   }
   ul{
     height: calc(100% - 100px);
     overflow: auto;
   }
   li{
     display: flex;
     align-items: center;
     padding: 10px;
     background: #fff;
     margin-top: 10px;
     img{
       width: 80px;
       margin: 0 10px;
     }
     .right{
       width: 15px;
       text-align: center;
     }
   }
   .foot{
     height: 50px;
     display: flex;
     align-items: center;
     background: #fff;
     justify-content: space-between;
    //  padding: 0 10px;
      padding-left: 10px;
     .foot_right{
       padding: 0px 15px;
       background: purple;
       color: #fff;
       line-height: 50px;
     }
   }
</style>
